<template>
	<view class="more-modal" v-if="visible" @touchmove.stop.prevent>
		<!-- 主弹窗 -->
		<view class="modal-mask" @click="close"></view>
		<view class="modal-content">
			<view class="modal-header">
				<text class="modal-title">更多功能</text>
			</view>
			<view class="modal-body">
				<view class="section">
					<text class="section-title">直播工具</text>
					<view class="tool-item" @click="handleLiveNotice">
						<text class="tool-name">直播预告</text>
						<view class="tool-right">
							<text class="tool-value">去设置</text>
							<uni-icons type="right" size="20"></uni-icons>
						</view>
					</view>
					<view class="tool-item" @click="showQualityModal = true">
						<text class="tool-name">清晰度</text>
						<view class="tool-right">
							<text class="tool-value">{{ currentQuality.label }}</text>
							<uni-icons type="right" size="20"></uni-icons>
						</view>
					</view>
					<view class="tool-item">
						<text class="tool-name">录屏</text>
						<view class="tool-right">
							<switch :checked="screenRecordEnabled" @change="handleScreenRecordSwitch" color="#55aaff" />
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 清晰度选择弹窗 -->
		<view class="quality-modal" v-if="showQualityModal">
			<view class="quality-mask" @click="showQualityModal = false"></view>
			<view class="quality-content">
				<view class="quality-header">
					<text class="quality-title">选择清晰度</text>
					<uni-icons type="closeempty" size="24" @click="showQualityModal = false"></uni-icons>
				</view>
				<view class="quality-body">
					<view class="quality-item" v-for="(item, index) in qualityOptions" :key="index"
						@click="selectQuality(index)">
						<text class="quality-name">{{ item.label }}</text>
						<uni-icons v-if="currentQuality.value === item.value" type="checkmarkempty" color="#55aaff"
							size="24"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- 我的预告弹窗 (底部弹出) -->
		<view class="notice-modal" v-if="showNoticeModal">
			<view class="notice-mask" @click="showNoticeModal = false"></view>
			<view class="notice-content">
				<view class="notice-header">
					<uni-icons type="arrowleft" size="24" @click="showNoticeModal = false"></uni-icons>
					<text class="notice-title">我的预告</text>
					<text class="notice-create" v-if="noticeList.length < 3" @click="showCreateModal = true">创建</text>
					<text v-else style="width: 80rpx;"></text>
				</view>
				<view class="notice-body">
					<view v-if="noticeList.length > 0" class="notice-list">
						<view class="notice-item" v-for="(item, index) in noticeList" :key="index">
							<view class="notice-info">
								<view style="display: flex;justify-content: space-between;align-items: center;">
									<text class="notice-title"
										style="font-size: 32rpx;">{{ formatNoticeTime(item.time) }}</text>
									<view class="notice-actions">
										<image src="/static/image-my/Frame@3x(6).png" mode="aspectFill"
											style="width: 40rpx;height: 40rpx;" @click="editNotice(index)">
										</image>
										<image src="/static/prerview/Frame@3x(1).png" mode="aspectFill"
											style="width: 40rpx;height: 40rpx;margin-left: 20rpx;"
											@click="shareNotice(index)">
										</image>
									</view>
								</view>

								<text class="notice-time">0人已预约</text>
								<text class="notice-title">{{ item.title }} </text>
							</view>

						</view>
					</view>
					<view v-else class="empty-notice">
						<text class="empty-text">暂无预告，立即创建</text>
						<text class="empty-subtext">吸引粉丝提前预约，锁定直播间</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 创建预告弹窗 -->
		<notice :visible="showCreateModal" @close="showCreateModal = false" @create="handleCreateNotice" />

		<!-- 编辑预告弹窗 -->
		<view class="edit-notice-modal" v-if="showEditModal">
			<view class="edit-mask" @click="showEditModal = false"></view>
			<view class="edit-content">
				<view class="modal-header">
					<text class="modal-title">编辑直播预告</text>
					<view style="display: flex;">
						<button class="create-btn" @click="saveNotice">保存</button>
						<button class="create-btn" @click="deleteNotice" style="color: red;">删除</button>
					</view>
				</view>

				<view class="form-content">

					<view class="form-title">
						<text class="item-label">直播标题*</text>
						<textarea v-model="editingNotice.title" class="intro-textarea" placeholder="请输入直播标题"
							maxlength="15" style="height: 100rpx;"></textarea>
						<text class="word-count">{{ editingNotice.title.length }}/15</text>
					</view>
					<!-- 开播时间 -->
					<view class="form-item" @click="openTimePicker">
						<text class="item-label">开播时间*</text>
						<view class="item-value">
							<text class="time-text" :class="{placeholder: !editingNotice.time}">
								{{ editingNotice.time || '请选择' }}
							</text>
							<uni-icons type="right" size="20"></uni-icons>
						</view>
					</view>

					<!-- 预告封面 -->
					<view class="form-item">
						<text class="item-label">预告封面</text>
						<view class="cover-upload" @click="chooseCover">
							<image v-if="editingNotice.cover" :src="editingNotice.cover" class="cover-image"
								mode="aspectFill"></image>
							<view v-else class="upload-placeholder">
								<text class="plus-icon">+</text>
							</view>
						</view>
					</view>

					<!-- 直播介绍 -->
					<view class="form-item">
						<text class="item-label">直播介绍</text>
						<textarea v-model="editingNotice.introduction" class="intro-textarea"
							placeholder="直播介绍可以更好的帮助观众了解您的直播内容" maxlength="100"></textarea>
						<text
							class="word-count">{{ editingNotice.introduction ? editingNotice.introduction.length : 0 }}/100</text>
					</view>
				</view>

				<!-- 时间选择器弹框 -->
				<view v-if="showTimePicker" class="time-picker-modal">
					<view class="picker-mask" @click="cancelTimePicker"></view>
					<view class="picker-content">
						<view class="picker-header">
							<text class="picker-title">选择开播时间</text>
							<!-- 	<text class="picker-tip">请选择1小时后-7天内的开播时间</text> -->
						</view>
						<picker-view :value="pickerValue" @change="handleTimeChange" class="time-picker"
							indicator-style="height: 80rpx;">
							<picker-view-column>
								<view v-for="(item,index) in availableDays" :key="index" class="picker-item">
									{{item.label}}
								</view>
							</picker-view-column>
							<picker-view-column>
								<view v-for="(item,index) in availableHours" :key="index" class="picker-item">{{item}}时
								</view>
							</picker-view-column>
							<picker-view-column>
								<view v-for="(item,index) in availableMinutes" :key="index" class="picker-item">
									{{item}}分
								</view>
							</picker-view-column>
						</picker-view>
						<view class="picker-buttons">
							<button class="picker-btn cancel" @click="cancelTimePicker" hover-class="none">取消</button>
							<button class="picker-btn confirm" @click.stop="confirmTimePicker"
								hover-class="none">确定</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import notice from '@/pages/notice/notice.vue'
	export default {
		components: {
			notice
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			}
		},
		data() {
			const now = new Date();
			// 计算最小可选时间（当前时间+1小时）
			const minTime = new Date(now.getTime() + 60 * 60 * 1000);
			// 计算最大可选时间（当前时间+7天）
			const maxTime = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000);

			return {
				screenRecordEnabled: false,
				showNoticeModal: false,
				showCreateModal: false,
				showEditModal: false,
				showQualityModal: false,
				showTimePicker: false,
				editingIndex: -1,
				qualityOptions: [{
						label: '流畅',
						value: 'ld'
					},
					{
						label: '标清',
						value: 'sd'
					},
					{
						label: '高清',
						value: 'hd'
					}
				],
				currentQuality: {
					label: '高清',
					value: 'hd'
				},
				editingNotice: {
					time: '',
					title: '',
					cover: '',
					introduction: '',
					status: '未开始'
				},
				noticeList: [],
				// 时间选择器相关数据
				pickerValue: [0, 0, 0],
				availableDays: [],
				availableHours: [],
				availableMinutes: [],
				minTime,
				maxTime,
				lastDayIndex: 0,
				lastHourIndex: 0,
				tempTime: ''
			}
		},
		created() {
			// 初始化时从本地存储读取数据
			const storedNotices = uni.getStorageSync('liveNotices')
			if (storedNotices) {
				this.noticeList = JSON.parse(storedNotices)
			}
		},
		watch: {
			// 监听预告列表变化并同步到本地存储
			noticeList: {
				deep: true,
				handler(newVal) {
					uni.setStorageSync('liveNotices', JSON.stringify(newVal))
				}
			}
		},
		methods: {
			close() {
				this.$emit('close')
			},
			formatNoticeTime(timeStr) {
				if (!timeStr) return '';

				try {
					// 处理 ISO 格式 (如 "2025-07-28T11:04:00.000Z")
					if (timeStr.includes('T')) {
						const date = new Date(timeStr);
						const month = date.getMonth() + 1;
						const day = date.getDate();
						const hours = date.getHours().toString().padStart(2, '0');
						const minutes = date.getMinutes().toString().padStart(2, '0');
						return `${month}月${day}日 ${hours}:${minutes}`;
					}

					// 处理 YYYY-MM-DD HH:mm 格式
					const [datePart, timePart] = timeStr.split(' ');
					const [year, month, day] = datePart.split('-');
					const [hour, minute] = timePart.split(':');
					return `${parseInt(month)}月${parseInt(day)}日 ${hour}:${minute}`;
				} catch (e) {
					console.error('时间格式化错误:', e);
					return timeStr; // 返回原始字符串
				}
			},
			selectQuality(index) {
				this.currentQuality = this.qualityOptions[index]
				this.showQualityModal = false
				this.$emit('quality-change', this.currentQuality.value)
				uni.showToast({
					title: `已切换至${this.currentQuality.label}模式`,
					icon: 'none'
				})
			},
			handleScreenRecordSwitch(e) {
				this.screenRecordEnabled = e.detail.value
				this.$emit('screen-record-change', this.screenRecordEnabled)
				uni.showToast({
					title: this.screenRecordEnabled ? '录屏已开启' : '录屏已关闭',
					icon: 'none'
				})
			},
			handleLiveNotice() {
				this.showNoticeModal = true
			},
			handleCreateNotice(data) {
				const newNotice = {
					time: data.time || this.getCurrentTimeString(), // 使用标准格式
					title: data.title || '新直播',
					cover: data.cover || '',
					introduction: data.introduction || '',
					reserveCount: 0,
					status: '未开始'
				};
				this.noticeList.unshift(newNotice);
				uni.showToast({
					title: '预告创建成功',
					icon: 'success'
				});
				this.showCreateModal = false;
				uni.setStorageSync('liveNotices', JSON.stringify(this.noticeList));
			},
			editNotice(index) {
				this.editingIndex = index
				this.editingNotice = JSON.parse(JSON.stringify(this.noticeList[index]))
				this.showEditModal = true
			},
			shareNotice(index) {
				const notice = this.noticeList[index]
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 0,
					title: '直播预告：' + notice.time,
					summary: notice.introduction,
					imageUrl: notice.cover,
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				})
			},
			deleteNotice() {
				uni.showModal({
					title: '提示',
					content: '确定要删除这条直播预告吗？',
					success: (res) => {
						if (res.confirm) {
							this.noticeList.splice(this.editingIndex, 1)
							this.showEditModal = false
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							})
							// 手动同步到本地存储
							uni.setStorageSync('liveNotices', JSON.stringify(this.noticeList))
						}
					}
				})
			},
			saveNotice() {
				if (!this.editingNotice.time) {
					uni.showToast({
						title: '请选择开播时间',
						icon: 'none'
					})
					return
				}

				if (!this.editingNotice.title) {
					uni.showToast({
						title: '请输入直播标题',
						icon: 'none'
					})
					return
				}

				if (this.editingIndex >= 0) {
					this.noticeList.splice(this.editingIndex, 1, this.editingNotice)
				} else {
					this.noticeList.unshift(this.editingNotice)
				}

				this.showEditModal = false
				uni.showToast({
					title: '保存成功',
					icon: 'success'
				})
				// 手动同步到本地存储
				uni.setStorageSync('liveNotices', JSON.stringify(this.noticeList))
			},
			chooseCover() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (res) => {
						this.editingNotice.cover = res.tempFilePaths[0]
					}
				})
			},
			// 初始化时间选择器数据
			initTimePicker() {
				const now = new Date();
				const minTime = this.minTime;
				const maxTime = this.maxTime;

				// 生成可选的日期
				const days = [];
				const currentDay = minTime.getDate();
				const currentMonth = minTime.getMonth() + 1;
				const currentYear = minTime.getFullYear();

				// 计算今天剩余可选的小时和分钟
				const todayHours = [];
				const todayMinutes = [];

				// 如果是今天，计算从当前时间+1小时开始的小时
				if (minTime.getDate() === now.getDate()) {
					const startHour = minTime.getHours();
					for (let h = startHour; h < 24; h++) {
						todayHours.push(h);
					}

					// 如果是当前小时，计算从当前分钟开始的分钟
					if (minTime.getHours() === now.getHours()) {
						const startMinute = Math.ceil(now.getMinutes() / 10) * 10; // 10分钟间隔
						for (let m = startMinute; m < 60; m += 10) {
							todayMinutes.push(m);
						}
					} else {
						// 不是当前小时，从0分钟开始
						for (let m = 0; m < 60; m += 10) {
							todayMinutes.push(m);
						}
					}
				}

				// 生成可选日期
				const tempDate = new Date(minTime);
				while (tempDate <= maxTime) {
					const day = tempDate.getDate();
					const month = tempDate.getMonth() + 1;
					const year = tempDate.getFullYear();

					let label = `${month}月${day}日`;


					days.push({
						date: `${year}-${month}-${day}`,
						label: label,
						isToday: day === currentDay && month === currentMonth && year === currentYear
					});

					tempDate.setDate(tempDate.getDate() + 1);
				}

				this.availableDays = days;

				// 设置默认的小时和分钟选项
				this.updateAvailableHours(0);
				this.updateAvailableMinutes(0, 0);
			},

			// 根据选择的日期更新可选小时
			updateAvailableHours(dayIndex) {
				const selectedDay = this.availableDays[dayIndex];
				const isToday = selectedDay.isToday;
				const now = new Date();
				const minTime = this.minTime;

				let hours = [];
				if (isToday) {
					// 如果是今天，从当前时间+1小时开始
					const startHour = minTime.getHours();
					for (let h = startHour; h < 24; h++) {
						hours.push(h);
					}
				} else {
					// 其他日期，全天可选
					for (let h = 0; h < 24; h++) {
						hours.push(h);
					}
				}

				this.availableHours = hours;
			},

			// 根据选择的日期和小时更新可选分钟
			updateAvailableMinutes(dayIndex, hourIndex) {
				const selectedDay = this.availableDays[dayIndex];
				const selectedHour = this.availableHours[hourIndex];
				const isToday = selectedDay.isToday;
				const now = new Date();
				const minTime = this.minTime;

				let minutes = [];
				if (isToday && selectedHour === minTime.getHours()) {
					// 如果是今天且是当前小时，从当前分钟+1开始
					const startMinute = Math.ceil(minTime.getMinutes() / 10) * 10; // 10分钟间隔
					for (let m = startMinute; m < 60; m += 10) {
						minutes.push(m);
					}
				} else {
					// 其他情况，从0分钟开始
					for (let m = 0; m < 60; m += 10) {
						minutes.push(m);
					}
				}

				this.availableMinutes = minutes;
			},

			// 打开时间选择器
			openTimePicker() {
				this.initTimePicker();
				this.showTimePicker = true;

				// 如果有已选时间，设置默认选中项
				if (this.editingNotice.time) {
					try {
						// 解析已有的时间格式 "8月10日 10:00"
						const timeMatch = this.editingNotice.time.match(/(\d+)月(\d+)日 (\d+):(\d+)/);
						if (timeMatch) {
							const month = parseInt(timeMatch[1]);
							const day = parseInt(timeMatch[2]);
							const hour = parseInt(timeMatch[3]);
							const minute = parseInt(timeMatch[4]);

							// 找到对应的日期索引
							const dateStr = `${new Date().getFullYear()}-${month}-${day}`;
							const dayIndex = this.availableDays.findIndex(d => d.date === dateStr);
							if (dayIndex >= 0) {
								// 找到对应的小时索引
								const hourIndex = this.availableHours.indexOf(hour);
								if (hourIndex >= 0) {
									// 找到对应的分钟索引
									const minuteIndex = this.availableMinutes.indexOf(minute);
									if (minuteIndex >= 0) {
										this.pickerValue = [dayIndex, hourIndex, minuteIndex];
									}
								}
							}
						}
					} catch (e) {
						console.error('时间解析错误:', e);
					}
				}
			},

			// 时间选择变化
			handleTimeChange(e) {
				const val = e.detail.value;
				this.pickerValue = val;

				// 当日期变化时，更新可选小时
				if (val[0] !== this.lastDayIndex) {
					this.updateAvailableHours(val[0]);
					this.lastDayIndex = val[0];
				}

				// 当小时变化时，更新可选分钟
				if (val[1] !== this.lastHourIndex) {
					this.updateAvailableMinutes(val[0], val[1]);
					this.lastHourIndex = val[1];
				}

				// 生成临时时间显示
				const selectedDay = this.availableDays[val[0]];
				const selectedHour = this.availableHours[val[1]];
				const selectedMinute = this.availableMinutes[val[2]];

				this.tempTime = `${selectedDay.label} ${this.addZero(selectedHour)}:${this.addZero(selectedMinute)}`;
			},

			// 确认选择时间
			confirmTimePicker() {
				const val = this.pickerValue;
				const selectedDay = this.availableDays[val[0]];
				const selectedHour = this.addZero(this.availableHours[val[1]]);
				const selectedMinute = this.addZero(this.availableMinutes[val[2]]);

				// 格式化为 YYYY-MM-DD HH:mm
				const [year, month, day] = selectedDay.date.split('-');
				this.editingNotice.time = `${year}-${month}-${day} ${selectedHour}:${selectedMinute}`;
				this.showTimePicker = false;
			},

			// 取消选择时间
			cancelTimePicker() {
				this.showTimePicker = false;
			},

			// 补零函数
			addZero(num) {
				return num < 10 ? `0${num}` : num;
			},

			// 格式化时间
			formatTime(date) {
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const hours = date.getHours();
				const minutes = date.getMinutes();
				return `${month}月${day}日 ${hours}:${minutes < 10 ? '0' + minutes : minutes}`;
			}
		}
	}
</script>

<style lang="scss">
	.more-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 999;

		.modal-mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 999;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.modal-content {
			position: absolute;
			z-index: 1000;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0 0;
			padding: 30rpx;
			box-sizing: border-box;
			animation: slide-up 0.3s ease;
		}

		.modal-header {
			text-align: center;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #eee;

			.modal-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
		}

		.modal-body {
			padding-top: 20rpx;
		}

		.section {
			margin-bottom: 30rpx;

			.section-title {
				font-size: 28rpx;
				color: #999;
				padding: 10rpx 0;
			}

			.tool-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 25rpx 0;
				border-bottom: 1rpx solid #f5f5f5;

				.tool-name {
					font-size: 30rpx;
					color: #333;
				}

				.tool-right {
					display: flex;
					align-items: center;

					.tool-value {
						font-size: 28rpx;
						color: #999;
						margin-right: 10rpx;
					}

					switch {
						transform: scale(0.8);
						transform-origin: right center;
					}
				}

				&:active {
					background-color: #f5f5f5;
				}
			}
		}

		.quality-modal {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1000;

			.quality-mask {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.5);
			}

			.quality-content {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				background-color: #fff;
				border-radius: 24rpx 24rpx 0 0;
				animation: slide-up 0.3s ease;
			}

			.quality-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				border-bottom: 1rpx solid #eee;

				.quality-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}
			}

			.quality-body {
				padding: 20rpx 30rpx;

				.quality-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 25rpx 0;
					border-bottom: 1rpx solid #f5f5f5;

					.quality-name {
						font-size: 30rpx;
						color: #333;
					}

					&:active {
						background-color: #f5f5f5;
					}
				}
			}
		}

		.notice-modal {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1001;

			.notice-mask {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.5);
			}

			.notice-content {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				background-color: #fff;
				border-radius: 24rpx 24rpx 0 0;
				animation: slide-up 0.3s ease;
			}

			.notice-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				border-bottom: 1rpx solid #eee;

				.notice-title {
					font-size: 32rpx;
					font-weight: 700;
					color: #000;
				}

				.notice-create {
					color: #55aaff;
					font-size: 28rpx;
				}
			}

			.notice-body {
				padding: 30rpx;
				max-height: 60vh;
				overflow-y: auto;

				.empty-notice {
					text-align: center;
					padding: 60rpx 0;

					.empty-text {
						display: block;
						font-size: 28rpx;
						color: #333;
						margin-bottom: 10rpx;
					}

					.empty-subtext {
						display: block;
						font-size: 24rpx;
						color: #999;
					}
				}

				.notice-list {
					.notice-item {
						display: flex;
						justify-content: space-around;
						align-items: center;
						padding: 25rpx 0;
						border-bottom: 1rpx solid #f5f5f5;

						.notice-info {
							flex: 1;

							.notice-time {
								font-size: 28rpx;
								color: #333;
								display: block;
								margin-bottom: 8rpx;
								margin-bottom: 10rpx;
							}

							.notice-title {
								font-size: 30rpx;
								font-weight: 700;
							}
						}

						.notice-actions {
							display: flex;

							.action-icon {
								margin-left: 30rpx;
							}
						}
					}
				}
			}
		}

		.edit-notice-modal {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1002;

			.edit-mask {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.5);
			}

			.edit-content {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				background-color: #fff;
				border-radius: 24rpx 24rpx 0 0;
				max-height: 80vh;
				overflow-y: auto;

				.modal-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx;
					border-bottom: 1rpx solid #f0f0f0;

					.modal-title {
						font-size: 34rpx;
						font-weight: bold;
						color: #333;
					}

					.create-btn {
						background: none;
						border: none;
						color: #55aaff;
						font-size: 32rpx;
						padding: 0;
						margin: 0;
						line-height: 1;
						margin-left: 20rpx;

						&::after {
							border: none;
						}
					}
				}

				.form-content {
					padding: 30rpx;
				}

				.form-item {
					margin-bottom: 40rpx;

					.item-label {
						display: block;
						font-size: 30rpx;
						color: #333;
						margin-bottom: 20rpx;
						font-weight: 500;
					}

					.item-value {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 20rpx 0;
						border-bottom: 1rpx solid #f0f0f0;

						.time-text {
							font-size: 28rpx;
							color: #333;

							&.placeholder {
								color: #999;
							}
						}
					}

					.image {
						width: 32rpx;
						height: 32rpx;
					}

					.cover-upload {
						width: 200rpx;
						height: 200rpx;
						background-color: #f7f7f7;
						border-radius: 8rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.cover-image {
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
						}

						.upload-placeholder {
							text-align: center;

							.plus-icon {
								font-size: 60rpx;
								color: #ccc;
								line-height: 1;
							}
						}
					}

					.intro-textarea {
						width: 100%;
						height: 200rpx;
						background-color: #f7f7f7;
						border-radius: 8rpx;
						padding: 20rpx;
						box-sizing: border-box;
						font-size: 28rpx;
						color: #333;
					}

					.word-count {
						display: block;
						text-align: right;
						font-size: 24rpx;
						color: #999;
						margin-top: 10rpx;
					}
				}
			}

			/* 时间选择器样式 */
			.time-picker-modal {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 1003;

				.picker-mask {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-color: rgba(0, 0, 0, 0.5);
				}

				.picker-content {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					background-color: #fff;
					border-radius: 24rpx 24rpx 0 0;
				}

				.picker-header {
					display: flex;
					flex-direction: column;
					text-align: center;
					padding: 30rpx;
					border-bottom: 1rpx solid #eee;

					.picker-title {
						font-size: 32rpx;
						color: #333;
					}
				}

				.time-picker {
					width: 100%;
					height: 500rpx;
				}

				.picker-item {
					font-size: 32rpx;
					text-align: center;
				}

				.picker-buttons {
					display: flex;
					justify-content: space-around;
					padding: 20rpx;
					border-top: 1rpx solid #eee;

					.picker-btn {
						width: 200rpx;
						height: 80rpx;
						line-height: 80rpx;
						border-radius: 40rpx;
						font-size: 30rpx;
					}

					.cancel {
						background-color: #f5f5f5;
						color: #333;
					}

					.confirm {
						background-color: #55aaff;
						color: #fff;
					}
				}
			}
		}
	}

	@keyframes slide-up {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}
</style>